<template>
  <div>
    <div class="h-top">
      <img
        @click="tz"
        src="../../image//my_img/返回箭头.png"
        style="width: 32px; height: 32px; color: #f2f2f2"
        alt=""
        class="img-left"
      />
      <span class="myq">{{ head_title }}</span>
    </div>
    <div class="Authebnt-main">

        <div class="Athebnt-box" >
          <img src="../../image/my_img/身份证1.png" class="img-box1" alt="" />
          <div id="show-picture" v-if="img_list1">
            <img :src="img_list1" class="show_picture-img" style="margin-left: 20%;" >
        </div>
          <div class="text-box1" v-else>
            <img
              class="inp1"
              @change="handleChange1"
              type="file"
              ref="imageInput1"
              accept="image/*"
              src="../../image/my_img/相机.png"
              alt=""
            />
            <div class="img-text">点击拍摄/上传人像面</div>
          </div>
        </div>
      <label for="fileInput" class="input-button" title="11111">选择文件</label>
      <input
        id="fileInput"
        @change="handleChange1"
        type="file"
        ref="imageInput1"
        style="display: none"
        accept="image/*"
      />

      <div class="Athebnt-box1">
        <img class="img-box" src="../../image/my_img/身份证.png" alt="" />
        <div id="show-picture1" v-if="img_list2">
            <img :src="img_list2" class="show_picture-img2" style="margin-left: 20%;" >
        </div>
        <div class="text-box2" v-else>
          <img src="../../image/my_img/相机.png" alt="" />
          <div class="img-text">点击拍摄/上传人像面</div>
        </div>
      </div>
      <label for="fileInput1" class="input-button1" title="11111">选择文件</label>
      <input
        id="fileInput1"
        @change="handleChange2"
        type="file"
        ref="imageInput2"
        style="display: none"
        accept="image/*"
      />

      <div class="foot">
        <button class="foot-btn" @click="goto">下一步</button>
      </div>
    </div>
    <!-- <button @click="processAllImages">提取文字</button>
    <p>提取到的内容：</p>
    <div id="result" v-for="(item, index) in resultSpan" :key="index">
      {{ item.text }}
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { createWorker } from 'tesseract.js'
import { useRouter } from 'vue-router'
import { lookupService } from 'dns'

const head_title = ref('实名认证')
const router = useRouter()
const name = ref('')
const idCard = ref('')
const Identity_nbr=ref('')
const imageInput1 = ref<HTMLInputElement | null>(null)
const imageInput2 = ref<HTMLInputElement | null>(null)
const resultSpan = ref<{ text: string }[]>([])
const img_list1 = ref('')
const img_list2 = ref('')


const tz = () => {
  router.go(-1)
}

const handleChange1 = () => {
  const userPhoto = imageInput1.value
  if (userPhoto && userPhoto.files && userPhoto.files[0]) {
    const reader = new FileReader()
    reader.readAsDataURL(userPhoto.files[0])
    reader.onload = (e) => {
      if (e.target && e.target.result) {
        img_list1.value = e.target.result as string
        const showPicture = document.getElementById('show-picture')
        if (showPicture) {
          while (showPicture.firstChild) {
            showPicture.removeChild(showPicture.firstChild)
          }
          const image = document.createElement('img')
          image.src = img_list1.value
          showPicture.appendChild(image)
        }
      }
    }
  }
   processAllImages()
}

const handleChange2 = () => {
  const userPhoto = imageInput2.value
  if (userPhoto && userPhoto.files && userPhoto.files[0]) {
    const reader = new FileReader()
    reader.readAsDataURL(userPhoto.files[0])
    reader.onload = (e) => {
      if (e.target && e.target.result) {
        img_list2.value = e.target.result as string
        const showPicture = document.getElementById('show-picture1')
        if (showPicture) {
          while (showPicture.firstChild) {
            showPicture.removeChild(showPicture.firstChild)
          }
          const image = document.createElement('img')
          image.src = img_list2.value
          showPicture.appendChild(image)
        }
      }
    }
  }
}

const processAllImages = async () => {
  const input1 = imageInput1.value
  const input2 = imageInput2.value
  if ((input1 && input1.files && input1.files[0]) || (input2 && input2.files && input2.files[0])) {
    try {
      const reader1 = new FileReader()
      const reader2 = new FileReader()
      if (input1 && input1.files && input1.files[0]) {
        reader1.readAsDataURL(input1.files[0])
        reader1.onload = async (e) => {
          if (e.target && e.target.result) {
            const worker = await createWorker('chi_sim')
            try {
              const result = await worker.recognize(e.target.result)
              console.log(result, '识别结果')
              const extractedText = result.data.text
              const lines = extractedText.split('\n')
              resultSpan.value = resultSpan.value.concat(
                lines.map((line) => ({ text: line.trim() })),
              )
              if (lines.length >= 8) {
                name.value = lines[0].trim()
                Identity_nbr.value=lines[6].trim()
                idCard.value = lines[1].trim()
              }
            } catch (ocrError) {
              console.error('OCR处理错误:', ocrError)
            } finally {
              await worker.terminate()
            }
          }
        }
        reader1.onerror = function (error) {
          console.error('文件读取错误:', error)
        }
      }
      // if (input2 && input2.files && input2.files[0]) {
      //   reader2.readAsDataURL(input2.files[0])
      //   reader2.onload = async (e) => {
      //     if (e.target && e.target.result) {
      //       const worker = await createWorker('chi_sim')
      //       try {
      //         const result = await worker.recognize(e.target.result)
      //         console.log(result, '识别结果')
      //         const extractedText = result.data.text
      //         const lines = extractedText.split('\n')
      //         resultSpan.value = resultSpan.value.concat(
      //           lines.map((line) => ({ text: line.trim() })),
      //         )
      //         if (lines.length >= 8) {
      //           name.value = lines[0].trim()
      //           idCard.value = lines[7].trim()
      //         }


      //       } catch (ocrError) {
      //         console.error('OCR处理错误:', ocrError)
      //       } finally {
      //         await worker.terminate()
      //       }
      //     }
      //   }
      //   reader2.onerror = function (error) {
      //     console.error('文件读取错误:', error)
      //   }
      // }
    } catch (fileReadError) {
      console.error('文件读取操作错误:', fileReadError)
    }
  }
}

const goto = async () => {
  // 相关逻辑
  // 相关逻辑
  const data_list=[
    {
      name:name.value,
      idCard:idCard.value,
      Identity_nbr:Identity_nbr.value
    }
  ]
  console.log(data_list);
  localStorage.setItem('data_list',JSON.stringify(data_list))
  router.push('/authenticationok')
}
</script>

<style scoped lang="scss">
.Authebnt {
  display: flex;
  display: inline-block;
  width: 100%;
  height: 665px;
  background-color: #f2f2f2;
}

.h-top {
  display: flex;
  width: 100%;
  height: 50px;
  background-color: #ffff;
  align-items: center;
  font-size: 18px;
}

.img-left {
  margin-left: 20px;
}

.myq {
  margin-left: 120px;
}

.Authebnt-main {
  display: flex;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #eee;
  margin-top: 10px;
}

.Athebnt-box {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 200px;
  // background-color: red;
}

.Athebnt-box1 {
  width: 100%;
  height: 200px;
  margin-top: 50px;
  // background-color: aqua;
}

.img-box {
  position: absolute;
  left: 65px;
  top: 330px;
  width: 250px;
}

.img-box1 {
  position: absolute;
  width: 250px;
  z-index: 111;
  left: 65px;
  top: 30px;
  text-align: center;
}

.img-xj {
  width: 50px;
  height: 50px;
}

.img-text {
  color: #124ed0cc;
  margin-top: 10px;
  font-style: 14px;
  font-weight: 600;
}

.text-box1 {
  position: absolute;
  left: 125px;
  top: 60px;
  z-index: 222;
  text-align: center;
}

.text-box2 {
  position: absolute;
  left: 130px;
  top: 360px;
  text-align: center;
}

.foot {
  width: 100%;
  text-align: center;
  margin-top: 60px;
}

.foot-btn {
  width: 300px;
  height: 50px;
  background-color: #3087ea;
  color: #fff;
  font-size: 16px;
  margin-bottom: 50px;
  border: none;
}

.input-button {
  position: absolute;
  left: 42%;
  top: 120px;
  // background-color: red;
  width: 50px;
  height: 50px;
  z-index: 444;
  font-size: 0;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.5);
}

.input-button1 {
  position: absolute;
  left: 43%;
  top: 54%;
  // background-color: red;
   width: 50px;
  height: 50px;
  z-index: 444;
  font-size: 0;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.5);
}
.show_picture-img {
  width: 250px;
  height: 160px;
  z-index: 666;
  position: absolute;
  top: 14%;
  left: -3%;
  border-radius: 10px;
}

.show_picture-img2 {
  width: 250px;
  height: 160px;
  z-index: 555;
  position: absolute;
  top: 50%;
  left: -3%;
  border-radius: 10px;
}
</style>
